<template>
  <div id="Report">
    <!-- 面包导航 -->
    <el-breadcrumb
      separator="/"
      style="padding-left: 10px; padding-bottom: 10px; font-size: 12px"
    >
      <el-breadcrumb-item :to="{ path: '/user' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据面板</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col :span="12">
        <el-card shadow="hover" style="margin-top: 5px">
          <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
          <div id="loginRecord" style="width: 650px; height: 300px"></div>
        </el-card>
        <el-card shadow="hover" style="margin-top: 5px">
          <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
          <div id="pieChart" style="width: 650px; height: 200px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card
          class="box-card"
          header="登录日志"
          shadow="hover"
          style="margin-left: 10px; margin-top: 5px"
        >
          <el-table
            :data="userLogs"
            style="height: 547px; width: 100%"
            max-height="490px"
            size="mini"
          >
            <el-table-column
              label="用户名"
              prop="username"
              align="center"
            ></el-table-column>
            <el-table-column
              label="班级"
              prop="className"
              align="center"
            ></el-table-column>
            <el-table-column
              label="IP"
              prop="loginRecordIP"
              align="center"
            ></el-table-column>
            <el-table-column prop="loginTime" label="登录时间" align="center">
              <template slot-scope="scope"
                >{{ scope.row.loginTime | dateFormat }}
              </template></el-table-column
            >
            <el-table-column
              label="设备"
              prop="os"
              align="center"
            ></el-table-column>
            <el-table-column label="设备" prop="loginType" align="center">
              <template slot-scope="scope"
                >{{ scope.row.loginType == 1 ? "Web端" : "小程序端" }}
              </template></el-table-column
            >
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from "echarts";
import { queryReport, queryReportByDate, queryLogs } from "api/api";
export default {
  data() {
    return {
      pieChart: [], //存放OS名称
      selected: {}, //存放选择的数据
      seriesData: [{ os: "", value: "" }], //饼图数据
      xData: [],
      yData: [],
      userLogs: [],
    };
  },
  methods: {
    //根据OS进行分类统计
    getReport() {
      //OS日志报表
      queryReport().then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.pieChart = [];
          this.selected = {};
          this.seriesData = [];
          var $this = this;
          //构建饼图的数据对象
          res.data.forEach(function (e) {
            $this.pieChart.push(e.os);
            $this.seriesData.push({ name: e.os, value: e.count });
          });
          this.drawPieChart();
        }
      });
    },
    //绘制饼图
    drawPieChart() {
      var myChart = echarts.init(document.getElementById("pieChart"));
      var option = {
        title: {
          text: "登录系统统计图",
          left: "left",
        },
        toolbox: {
          show: true,
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 50,
          bottom: 20,
          data: this.pieChart,
          selected: this.selected,
        },
        series: [
          {
            name: "操作系统",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            data: this.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    //根据date进行分类统计
    getReportByDate() {
      queryReportByDate().then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.xData = [];
          this.yData = [];
          var $this = this;
          res.data.forEach(function (e) {
            $this.xData.push(e.date);
            $this.yData.push(e.count);
          });
          this.draw();
        }
      });
    },
    //绘制条形图
    draw() {
      var myChart = echarts.init(document.getElementById("loginRecord"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "登录记录统计图",
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false }, //  缩放
            magicType: { type: ["bar", "line"] }, ///　　折线  直方图切换
            restore: {}, // 重置
            saveAsImage: {}, // 导出图片
          },
        },
        tooltip: {},
        legend: {
          data: ["日期"],
        },
        xAxis: {
          data: this.xData,
        },
        yAxis: {},
        series: [
          {
            name: "登录次数",
            type: "bar",
            showBackground: true,
            data: this.yData,
            itemStyle: {
              normal: {
                //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                color: function (params) {
                  // build a color map as your need.
                  var colorList = [
                    "#0780cf ",
                    "#fa6d1d ",
                    "#ac2026 ",
                    "#701866 ",
                    "#d22e8d ",
                    "#FE8463",
                    "#a195c5 ",
                    "#FAD860",
                    "#F3A43B",
                    "#60C0DD",
                    "#D7504B",
                    "#a195c5",
                    "#F4E001",
                    "#F0805A",
                    "#63b2ee",
                  ];
                  return colorList[params.dataIndex];
                }, //以下为是否显示，显示位置和显示格式的设置了
                label: {
                  show: true,
                  position: "top",
                  //                             formatter: '{c}'
                  formatter: "{c}",
                },
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    //查询当前的登录日志
    getLogs() {
      queryLogs().then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.userLogs = res.data;
        }
      });
    },
  },
  mounted() {
    this.getReport();
    this.getReportByDate();
    this.getLogs();
  },
};
</script>